// 源插件
import React, { PureComponent } from 'react';
import { DateDiff, DateStamp, FormatnumberZero, Mover, NumberDivide } from '@/function.js';
// 视图插件
import { Button, Card, Col, Form, notification, Row } from 'antd';
// 外部组件
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import StandardTablePro from '@/components/UpgradeReportStandardTable/StandardTablePro';
import { connect } from 'dva';
import html2canvas from 'html2canvas';
// css OR less预编译器

// 图片

/**
 *  Describe:数据连接
 */

@connect(({ lastTrade, loading }) => ({
  lastTrade,
  loading: loading.models.lastTrade,
}))
@Form.create()
class LastTrade extends PureComponent {
  componentWillMount() {}

  /**
   *  Describe:当前状态
   */

  state = {
    listLoading: false, // 加载状态
    dataSourceSB: {
      data: [],
      total: [],
      code: 0,
    },
    dataSourceSS: {
      data: [],
      total: [],
      code: 0,
    },
    dataSourceO: {
      data: [],
      total: [],
      code: 0,
    },
    cropFlag: false,
  };

  HtmlCrop() {
    const that = this;
    const key = `open${Date.now()}`;
    const { dispatch } = that.props;
    const btn = (
      <Button
        type="primary"
        size="small"
        onClick={() => {
          notification.close(key);
          that.setState({
            cropFlag: true,
          });
          html2canvas(document.getElementById('crop'), {
            scale: 1,
          }).then(canvas => {
            const imgUrl = canvas.toDataURL();
            // dataURLtoFile(imgUrl, 'aaa')
            // 获取截图base64
            dispatch({
              type: 'lastTrade/CommitImage',
              payload: {
                base64Str: imgUrl,
                jobName: '交易小结',
              },
              callback: res => {
                that.setState({
                  cropFlag: false,
                });
              },
            });
          });
        }}
      >
        确定
      </Button>
    );
    notification.open({
      message: 'Notification Title',
      description: '是否上传',
      btn,
      key,
      onClose: close,
    });
  }

  render() {
    const {
      cropFlag,
      dataSourceO,
      dataSourceSB,
      dataSourceSS,
      dataSourceCpb,
      buyVisible,
      sellVisible,
      addStockVisible,
    } = this.state;
    return (
      <PageHeaderWrapper>
        <Card>
          <Row>
            <Col style={{ textAlign: 'right' }}>
              <Button
                type="primary"
                onClick={this.HtmlCrop.bind(this)}
                loading={cropFlag}
                style={{ margin: 8, width: '9rem' }}
                ghost
              >
                截图上传
              </Button>
            </Col>
          </Row>
          <br />
          <div id="crop">
            <StandardTablePro dataSource={dataSourceSB} closeScroll />
            <br />
            <StandardTablePro dataSource={dataSourceSS} closeScroll />
            <br />
            <StandardTablePro dataSource={dataSourceO} closeScroll />
          </div>
        </Card>
      </PageHeaderWrapper>
    );
  }

  dataSourceChange() {
    const { dispatch } = this.props;
    const that = this;
    dispatch({
      type: 'lastTrade/StockTradeList',
      callback: res => {
        const buyList = [];
        const sellList = [];
        for (let i = 0; i < res.list.stockTradeList.length; i++) {
          const item = res.list.stockTradeList[i];
          if (item.operateType === 1) {
            buyList.push(item);
          } else {
            sellList.push(item);
          }
        }
        that.setState({
          dataSourceSB: {
            title: `${res.list.time} 交易小结`,
            data: buyList,
            code: res.code,
            titleTotal: false,
            total: ['costMarketValue', 'profit'],
            columns: [
              {
                title: '代码',
                dataIndex: 'stock',
                align: 'left',
                width: 110,
                type: 'string',
              },
              {
                title: '方向',
                align: 'left',
                dataIndex: 'operateType',
                type: 'string',
                width: 60,
                render: (value, row, index) => {
                  if (value === 1) {
                    return <span style={{ color: 'rgb(250,126,126)' }}>买</span>;
                  }
                  if (value === 0) {
                    return <span style={{ color: 'rgb(100,190,130)' }}>卖</span>;
                  }
                  return <span style={{ color: 'rgb(250,126,126)' }}>{value}</span>;
                },
              },
              // {
              //   title: '标识',
              //   align:'left',
              //   dataIndex: 'aqDqMark',
              //   type:'string',
              //   width:60,
              //   render: (value, row, index) => {
              //     if (value === 1) {
              //       return 'AQDQ';
              //     } else if (value === 2) {
              //       return '期权行权';
              //     } else if (value === 0) {
              //       return '股票';
              //     } else {
              //       return value;
              //     }
              //   },
              // },
              {
                title: '数量',
                align: 'right',
                dataIndex: 'operateNum',
                type: 'number',
                width: 80,
              },
              {
                title: '当前价格',
                width: 80,
                align: 'right',
                dataIndex: 'nowPrice',
                type: 'number',
              },
              {
                title: '买入价格',
                width: 80,
                align: 'right',
                dataIndex: 'operatePrice',
                type: 'number',
              },
              {
                title: '本金市值',
                width: 80,
                align: 'right',
                dataIndex: 'costMarketValue',
                type: 'number',
              },
              {
                title: '盈亏百分比',
                width: 80,
                align: 'right',
                dataIndex: 'profitPercent',
                type: 'number',
                render: (value, row, index) => {
                  if (row.stock === '合计') {
                    return null;
                  }
                  return <span>{`${FormatnumberZero(value * 100, 2)}%`}</span>;
                },
              },
              {
                title: '利润',
                width: 80,
                align: 'right',
                dataIndex: 'profit',
                type: 'number',
              },
              {
                title: '银行',
                width: 80,
                align: 'center',
                dataIndex: 'bank',
                type: 'number',
                // search: true,
                render: (value, row, index) => {
                  if (value === 1) {
                    return '瑞银';
                  }
                  if (value === 2) {
                    return '花旗';
                  }
                  return value;
                },
              },
              {
                title: '标识',
                dataIndex: 'aqDqMark',
                type: 'string',
                width: 60,
                render: (value, row, index) => {
                  if (value === 1) {
                    return 'AQDQ';
                  }
                  if (value === 2) {
                    return '期权行权';
                  }
                  if (value === 0) {
                    return '股票';
                  }
                  return value;
                },
              },
            ],
          },
          dataSourceSS: {
            title: false,
            data: sellList,
            code: res.code,
            titleTotal: false,
            total: ['costMarketValue', 'profit'],
            columns: [
              {
                title: '代码',
                dataIndex: 'stock',
                align: 'left',
                width: 110,
                type: 'string',
              },
              {
                title: '方向',
                align: 'left',
                dataIndex: 'operateType',
                type: 'string',
                width: 60,
                render: (value, row, index) => {
                  if (value === 1) {
                    return <span style={{ color: 'rgb(250,126,126)' }}>买</span>;
                  }
                  if (value === 0) {
                    return <span style={{ color: 'rgb(100,190,130)' }}>卖</span>;
                  }
                  return <span style={{ color: 'rgb(250,126,126)' }}>{value}</span>;
                },
              },
              /*  {
                  title: '标识',
                  align:'left',
                  dataIndex: 'aqDqMark',
                  type:'string',
                  width:60,
                  render: (value, row, index) => {
                    if (value === 1) {
                      return 'AQDQ';
                    } else if (value === 2) {
                      return '期权行权';
                    } else if (value === 0) {
                      return '股票';
                    } else {
                      return value;
                    }
                  },
                }, */
              {
                title: '数量',
                align: 'right',
                dataIndex: 'operateNum',
                type: 'number',
                width: 80,
              },
              {
                title: '卖出价格',
                width: 80,
                align: 'right',
                dataIndex: 'operatePrice',
                type: 'number',
              },
              {
                title: '成本价格',
                width: 80,
                align: 'right',
                dataIndex: 'costPrice',
                type: 'number',
              },
              {
                title: '本金市值',
                width: 80,
                align: 'right',
                dataIndex: 'costMarketValue',
                type: 'number',
              },
              {
                title: '盈亏百分比',
                width: 80,
                align: 'right',
                dataIndex: 'profitPercent',
                type: 'number',
                render: (value, row, index) => {
                  if (row.stock === '合计') {
                    return null;
                  }
                  return <span>{`${FormatnumberZero(value * 100, 2)}%`}</span>;
                },
              },
              {
                title: '利润',
                width: 80,
                align: 'right',
                dataIndex: 'profit',
                type: 'number',
              },
              {
                title: '银行',
                width: 80,
                align: 'center',
                dataIndex: 'bank',
                type: 'number',
                // search: true,
                render: (value, row, index) => {
                  if (value === 1) {
                    return '瑞银';
                  }
                  if (value === 2) {
                    return '花旗';
                  }
                  return value;
                },
              },
              {
                title: '标识',
                dataIndex: 'aqDqMark',
                type: 'string',
                width: 60,
                render: (value, row, index) => {
                  if (value === 1) {
                    return 'AQDQ';
                  }
                  if (value === 2) {
                    return '期权行权';
                  }
                  if (value === 0) {
                    return '股票';
                  }
                  return value;
                },
              },
            ],
          },
        });
      },
    });
    dispatch({
      type: 'lastTrade/GetLastTradeList',
      callback: res => {
        that.setState({
          dataSourceO: {
            title: false,
            data: res.data,
            code: res.code,
            titleTotal: false,
            total: ['profit', 'positionSize'],
            columns: [
              {
                title: '代码',
                dataIndex: 'code',
                align: 'left',
                width: 110,
                type: 'string',
              },
              {
                title: '买卖方向',
                dataIndex: 'typeName',
                type: 'string',
                width: 60,
                align: 'left',
                render: (value, row, index) => {
                  return <span style={{ color: 'rgb(100,130,200' }}>{value}</span>;
                },
              },
              {
                title: '执行价',
                width: 80,
                dataIndex: 'strikePrice',
                type: 'number',
                align: 'right',
              },
              {
                title: '数量(手)',
                dataIndex: 'optionCount',
                type: 'number',
                width: 80,
                align: 'right',
                render: (value, row, index) => {
                  if (row.code === '合计') {
                    return null;
                  }
                  return <span>{mathService.div(value, 100)}</span>;
                },
              },
              {
                title: '敞口',
                width: 80,
                dataIndex: 'positionSize',
                type: 'number',
                align: 'right',
              },
              {
                title: '现价',
                dataIndex: 'nowPrice',
                type: 'number',
                width: 80,
                align: 'right',
              },
              {
                title: '到期日',
                width: 80,
                dataIndex: 'expiry',
                type: 'date',
                align: 'right',
                render: (value, row, index) => {
                  return <span>{typeof value === 'string' ? value.split(' ')[0] : ''}</span>;
                },
              },
              {
                title: '成本价',
                width: 75,
                dataIndex: 'costPrice',
                type: 'number',
                align: 'right',
              },
              {
                title: '利润',
                width: 80,
                dataIndex: 'profit',
                type: 'number',
                align: 'right',
              },
              {
                title: '银行',
                width: 80,
                dataIndex: 'bank',
                type: 'number',
                // search: true,
                align: 'center',
                render: (value, row, index) => {
                  if (value === 1) {
                    return '瑞银';
                  }
                  if (value === 2) {
                    return '花旗';
                  }
                  return value;
                },
              },
            ],
          },
        });
      },
    });
  }

  deleteStock(row) {
    const { dispatch } = this.props;
    dispatch({
      type: 'lastTrade/StockDelTrade',
      payload: row.id,
    });
  }

  componentDidMount() {
    this.dataSourceChange();
  }

  componentWillUnmount() {}
}

export default LastTrade;
